<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>模态框</title>
	<!-- Bootstrap -->
	<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
	<link href="fonts/iconfont.css" rel="stylesheet">
	<link href="../assets/css/style.css" rel="stylesheet" />
	<link href="../assets/css/motai.css" rel="stylesheet" />
	<link href="../assets/css/tabletable.css" rel="stylesheet" />
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		      <script src="../assets/js/html5shiv.min.js"></script>
		      <script src="../assets/js/respond.min.js"></script>
		      <![endif]-->
		  </head>

		  <body>

		  	<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">添加+</button>

		  	<!-- 模态框（Modal） -->
		  	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

		  	</div>

		  	<script src="../assets/js/jquery.min.js"></script>
		  	<script src="../assets/js/bootstrap.min.js"></script>
		  	<script src="../assets/js/main.js"></script>
		  	<script type="text/javascript">
		  		var motai = "";
		  		motai += "<div class='modal-dialog'>"
		  		motai += "<div class='modal-content'>"
		  		motai += "<div class='modal-header'><div  class='zuo-close' data-dismiss='modal'><i class='iconfont icon-o1'></i></div><h5 class='modal-title' id='myModalLabel'><i class='iconfont icon-wujiaoxings'></i>&nbsp;添加评价项</h5></div>"
		  		motai += "<div class='modal-body'>"
		  		motai += "<div class='row'>"
		  		motai += "<form class='form-horizontal' role='form'>"
				//名称
				motai += "<div class='form-group'><label for='firstname' class='col-sm-3 control-label'><span class='bitian'>*</span>名&emsp;&emsp;称</label><div class='col-sm-8'><input type='text' class='form-control' id='firstname' placeholder='请输入名字'></div></div>"
				//默认分类
				motai += "<div class='form-group'><label for='lastname' class='col-sm-3 control-label'><span class='bitian'>*</span>默认分类</label><div class='col-sm-8'>\<select id='usertype' name='usertype' class='selectpicker show-tick form-control'  data-live-search='true'><option value='0'>苹果</option><option value='1'>菠萝</option><option value='2'>香蕉</option><option value='3'>火龙果</option><option value='4'>梨子</option><option value='5'>草莓</option><option value='6'>哈密瓜</option><option value='7'>椰子</option></select></div></div>"
				//排序
				motai += "<div class='form-group'><label for='firstname' class='col-sm-3 control-label'>排&emsp;&emsp;序</label><div class='col-sm-8'><input type='text' class='form-control' id='firstname' placeholder='请输入名字'></div></div>"
				//发票备注
				motai += "<div class='form-group'><label  class='col-sm-3 control-label'>发票备注</label><div class='col-sm-8'><textarea type='text' class='form-control textarea_type'  placeholder='消息内容'></textarea></div></div>"
				//登陆账户
				motai += "<div class='form-group'><label for='firstname' class='col-sm-3 control-label'>登陆账户</label><div class='col-sm-8'><input type='text' class='form-control' id='firstname' value='partner-'></div></div>"
				//图片两张
				motai += "<div class='form-group'><label for='firstname' class='col-sm-3 control-label'><span class='bitian'>*</span>图&emsp;&emsp;片</label><div class='col-sm-8'><div class='file_div_img'><img src='../assets/images/wutu.png'></div><button class='file_img_button'><input type='file' class='file_img_input'> 上传图片</button></div></div>"
				motai += "<div class='form-group'><label for='firstname' class='col-sm-3 control-label'><span class='bitian'>*</span>图&emsp;&emsp;片</label><div class='col-sm-8'><div class='file_div_img95'><img src='../assets/images/wutu.png'></div><button class='file_img_button'><input type='file' class='file_img_input'> 上传图片</button></div></div>"
				//男女的选择
				motai += "<div class='form-group'><label for='firstname' class='col-sm-3 control-label'>发票备注</label><div class='col-sm-8'><img src='../assets/images/boy.png' class='boy'><img src='../assets/images/huiboy.png' class='boy huiboy display_no'/><img src='../assets/images/girl.png' class='girl'><img src='../assets/images/huigirl.png' class='girl huigirl display_no'></div></div>"
				//是否开启
				motai += "<div class='form-group'><label for='firstname' class='col-sm-3 control-label'><span class='bitian'>*</span>是否开启</label><div class='col-sm-8'><span class='beijing'><span class='yuanquan'></span></span><span class='open'>已开启</span><div class='clearfix'></div></div></div>"

				motai += "</form>"
				motai += "</div>"
				motai += "</div>"
				//底部
				motai += "<div class='modal-footer'><button type='button' class='btn save'>保存</button><button type='button' class='btn  close_motai' data-dismiss='modal'>关闭</button></div>"
				motai += "</div>"
				motai += "</div>"
				$('.modal').html(motai)
			</script>
			<script type="text/javascript">
			// 开启的js
			$(".yuanquan").on('click',function() {
				if ($(this).hasClass('colose-input')) {
					$(this).removeClass('colose-input');
					$(this).parent().siblings('.open').html('已开启')
					$(this).parent().removeClass('huibeijing');

				}else{
					$(this).parent().siblings('.open').html('已关闭')
					$(this).addClass('colose-input');
					$(this).parent().addClass('huibeijing');

				}
			})
				//切换男女
				$('.boy').on('click', function() {
				//如果现在是男生选中的状态的情况下点击
				if($(this).hasClass("huiboy")) {
					$(this).hide();
					$(this).siblings('.boy').show();

					//如果是没有选中的话点击变为选中
				} else {
					$(this).hide();
					$(this).siblings('.boy').show();
					$(this).siblings('.girl').show();
					$(this).siblings('.huigirl').hide();

				}
			})
				$('.girl').on('click', function() {
				//	如果现在是女生选中的状态的情况下点击
				if($(this).hasClass("huigirl")) {
					$(this).hide();
					$(this).siblings('.girl').show();

					//如果是没有选中的话
				} else {
					$(this).hide();
					$(this).siblings('.girl').show();
					$(this).siblings('.boy').show();
					$(this).siblings('.huiboy').hide();
				}
			})
			</script>

		</body>

		</html>